<template>
  <div class="search-task">
    <div class="search-task-inner">
      <div class="title">
        搜素结果<span>（{{task_list.length||0}}）</span>
      </div>
      <ul class="list">
        <li v-for="(item,index) in task_list" :key="index" @click="openDetails(item)">
          <i v-if="item.state==2">已办</i>
          <i v-else class="active">待办</i>
          <p>{{item.taskName}}</p>
          <span>{{item.projectShortName}}</span>
        </li>
      </ul>
    </div>
    <!--    任务详情-->
    <div v-if="is_show_details">
      <taskDetails :data="data_taskDetails" @close="closeDetails" @openTaskHandle="openTaskHandle"></taskDetails>
    </div>
    <!--    任务处理-->
    <div v-if="taskHandle_is_show">
      <taskHandle :data="taskHandle_data" @close="closeTaskHandle" @end="taskHandle_end"></taskHandle>
    </div>
  </div>
</template>

<script>
  import taskDetails from '@/components/taskDetails'
  import taskHandle from '@/components/taskDetails/handle'
  export default {
    name: "SearchTask",
    components: {
      taskDetails, taskHandle
    },
    data(){
      return{
        taskName:'',
        task_list:[],
        is_show_details:false,
        taskHandle_is_show:false,
        data_taskDetails: {
          type: 'my_task_list',//my_task_list:我的任务(待办) my_task_list_have:我的任务(已办) my_assign_list:我指派的（待办）my_assign_list_have:我指派的（已办）
        },
        taskHandle_data:{}
      }
    },
    watch:{
      $route() {
        this.taskName=this.$route.query.taskName||'';
        if(this.taskName!=''){
          this.queryTaskList();
        }else {
          this.task_list=[];
        }

      }
    },
    created(){
      this.taskName=this.$route.query.taskName||'';
      if(this.taskName!=''){
        this.queryTaskList();
      }else {
        this.task_list=[];
      }
    },
    methods:{
      //打开处理框
      openTaskHandle() {
        //关闭任务详情框
        this.is_show_details = false;
        //打开任务处理框
        this.taskHandle_is_show = true;
      },
      closeDetails() {
        this.is_show_details = false;
      },
      openDetails(item){
        let type='';
        //任务处理框
        this.taskHandle_data.taskId=item.taskId;
        this.taskHandle_data.reportCycle=item.reportCycle;
        this.taskHandle_data.limitTime=item.limitTime;
        //任务处理框
        this.is_show_details = true;
        this.data_taskDetails = item;
        if (item.state == 1) {
          //待办
          if (item.createUserId == this.$store.state.userInfo.userId) {
            //我指派的待办
            type = 'my_assign_list';
          }
          if (item.executeUserIds.indexOf(this.$store.state.userInfo.userId) != -1) {
            //我的任务待办
            type = 'my_task_list';
          }
        } else {
          //已办
          type = 'my_task_list_have';
        }
        this.data_taskDetails.type = type;
      },
      //获取任务列表
      queryTaskList() {
        let params={
          pageNum: 1,
          pageSize: 999,
          userId: this.$store.state.userInfo.userId,
          taskName: this.taskName,
        };
        this.$http.get('task/task/query/view', {params: params}).then(res => {
          if (res.statusCode == 200) {
              this.task_list=res.data.list;
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      // 关闭任务处理框
      closeTaskHandle() {
        //关闭任务处理框
        this.taskHandle_is_show = false;
        //打开任务详情
        this.is_show_details = true;
      },
      //任务处理完成后的回调
      taskHandle_end(){
        //关闭任务详情框
        this.is_show_details = false;
        //关闭任务处理框
        this.taskHandle_is_show = false;
      },
    },
  }
</script>

<style scoped type="text/scss" lang="scss">
  .search-task {
    width: 100%;
    height: 100%;
    padding: 24px 24px 24px 0;

    .search-task-inner {
      height: 100%;
      background-color: #ffffff;
      border-radius: 6px;
      padding: 0 24px;

      > .title {
        line-height: 62px;
        color: #454A55;
        font-size: 14px;
        border-bottom: 1px solid #EEEEEE;

        > span {
          color: #96A2AA;
        }
      }

      > .list {
        >li{
          line-height: 76px;
          border-bottom: 1px solid #EEEEEE;
          position: relative;
          cursor: pointer;
          >p{
            text-indent: 64px;
          }
          >i {
            position: absolute;
            width: 40px;
            height: 22px;
            line-height: 22px;
            left: 0;
            top: 26px;
            text-align: center;
            font-size: 12px;
            color: #96A2AA;
            background-color: #F4F5F9;
            border-radius: 4px;
          }
          >i.active{
            color: #0A52E4;
          }
          >span{
            height: 76px;
            line-height: 76px;
            position: absolute;
            right: 64px;
            top: 0;
            font-size: 14px;
            color: #454A55;
          }
        }

      }
    }
  }
</style>
